<!-- <template>
  <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
    <Calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import { Calendar } from 'ant-design-vue';

  const value = ref<Dayjs>();
  const onPanelChange = (value: Dayjs, mode: string) => {
    console.log(value, mode);
  };
</script> -->
<template>
  <div style="border: 1px solid #d9d9d9; border-radius: 4px">
    <Calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange">
      <template #headerRender="{ value: current, type, onChange, onTypeChange }">
        <div style="padding: 10px">
          <div style="margin-bottom: 10px">日历</div>
          <a-row type="flex" justify="space-between" class="flex justify-between">
            <a-col>
              <RadioGroup size="small" :value="type" @change="e => onTypeChange(e.target.value)">
                <RadioButton value="month">Month</RadioButton>
                <RadioButton value="year">Year</RadioButton>
              </RadioGroup>
            </a-col>
            <a-col>
              <Select
                size="small"
                :dropdown-match-select-width="false"
                class="my-year-select"
                :value="String(current.year())"
                @change="
                  newYear => {
                    onChange(current.year(+newYear));
                  }
                "
              >
                <SelectOption
                  v-for="val in getYears(current)"
                  :key="String(val)"
                  class="year-item"
                >
                  {{ val }}
                </SelectOption>
              </Select>
            </a-col>
            <a-col>
              <Select
                size="small"
                :dropdown-match-select-width="false"
                :value="String(current.month())"
                @change="
                  selectedMonth => {
                    onChange(current.month(parseInt(String(selectedMonth), 10)));
                  }
                "
              >
                <SelectOption
                  v-for="(val, index) in getMonths(current)"
                  :key="String(index)"
                  class="month-item"
                >
                  {{ val }}
                </SelectOption>
              </Select>
            </a-col>
          </a-row>
        </div>
      </template>
    </Calendar>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import { Calendar, Radio, Select, SelectOption, RadioGroup, RadioButton, Row , Col } from 'ant-design-vue';
  const value = ref<Dayjs>();

  const onPanelChange = (value: Dayjs, mode: string) => {
    console.log(value, mode);
  };

  const getMonths = (value: Dayjs) => {
    const localeData = value.localeData();
    const months = [];
    for (let i = 0; i < 12; i++) {
      months.push(localeData.monthsShort(value.month(i)));
    }
    return months;
  };

  const getYears = (value: Dayjs) => {
    const year = value.year();
    const years = [];
    for (let i = year - 10; i < year + 10; i += 1) {
      years.push(i);
    }
    return years;
  };
</script>
